<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事务管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="assets/css/styles.css">
    <!-- 谷歌字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <style>
        /* CSS 变量 */
        :root {
            --bg-color: #F5F5F5;
            --white-color: #FFF;
            --first-color: #0C5DF4;
            --border-color: #ddd;
            --button-bg-color: #0C5DF4;
            --button-text-color: #fff;
            --hover-bg-color: #e9ecef;
        }
        /* 基础样式 */
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--bg-color);
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: var(--first-color);
        }
        .content {
            max-width: 1200px;
            margin: auto;
        }
        .search-container form {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .search-container input[type="text"],
        .search-container select,
        .search-container button {
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
        }
        .search-container button {
            background-color: var(--button-bg-color);
            color: var(--button-text-color);
            cursor: pointer;
        }
        .search-container button:hover {
            background-color: darken(var(--button-bg-color), 10%);
        }
        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        th {
            background-color: var(--first-color);
            color: var(--white-color);
        }
        tr:hover {
            background-color: var(--hover-bg-color);
        }

        .delete-button::before {
            content: "⚠ "; /* 在按钮前添加警告符号 */
            font-weight: bold; /* 使警告符号加粗 */
        }

        /* 按钮通用样式 */
        .action-buttons button {
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            margin-right: 5px; /* 按钮之间的间隔 */
            transition: background-color 0.3s ease, transform 0.2s ease; /* 平滑的背景色和变换效果 */
        }

        .action-buttons button:hover {
            transform: scale(1.05); /* 悬停时轻微放大 */
        }

        /* 详情按钮样式 */
        .detail-button {
            background-color: #4B7BEF; /* 深蓝色背景 */
            color: var(--white-color);
        }

        .detail-button:hover {
            background-color: #3153A7; /* 悬停时更深的蓝色 */
        }

        /* 编辑按钮样式 */
        .edit-button {
            background-color: #28A745; /* 绿色背景 */
            color: var(--white-color);
        }

        .edit-button:hover {
            background-color: #1F7E31; /* 悬停时更深的绿色 */
        }

        /* 删除按钮样式 */
        .delete-button {
            background-color: #DC3545; /* 红色背景 */
            color: var(--white-color);
        }

        .delete-button:hover {
            background-color: #A72C34; /* 悬停时更深的红色 */
        }

        /* 增加字体加粗 */
        .add-button {
            font-weight: bold; /* 使按钮文字变粗 */
            position: relative; /* 为伪元素定位 */
            padding-left: 20px; /* 为伪元素内容预留空间 */
        }
        /* 确保加号图标正确显示 */
        .add-button i {
            margin-right: 5px;
            font-size: 1.2em;
        }
        .add-button::before {
            content: "+ "; /* 在按钮前添加加号符号 */
            font-weight: bold; /* 使加号符号加粗 */
            position: absolute; /* 绝对定位 */
            left: 10px; /* 距离左边的距离 */
        }

        .add-button-container {
            display: flex;
            align-items: center;
        }

        .add-button {
            padding: 8px 16px;
            background-color: var(--first-color);
            color: var(--white-color);
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: background-color 0.3s ease;
        }

        .add-button:hover {
            background-color: darken(var(--first-color), 10%);
        }

        .add-button i {
            margin-right: 5px;
            font-size: 1.2em;
        }
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .add-button-container {
            flex-shrink: 0; /* 防止按钮容器在小屏幕上压缩 */
        }

        .search-container {
            display: flex;
            flex-grow: 1; /* 让搜索容器占据剩余空间 */
            justify-content: flex-end; /* 让表单元素靠右排列 */
        }

        .search-container form {
            display: flex;
            align-items: center;
        }

        .search-container input[type="text"],
        .search-container select {
            margin-right: 10px; /* 为输入框和选择框添加间隔 */
        }

        .search-container button {
            margin-left: 10px; /* 为按钮添加间隔 */
        }
        .action-buttons {
            display: flex; /* 使用Flexbox布局 */
            gap: 10px; /* 按钮之间的间隔 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
        }
        /* 优先级颜色 */
        .priority-0 {
            background-color: #ffcccc; /* 重要，浅红色 */
        }
        .priority-1 {
            background-color: #ffffcc; /* 紧急，浅黄色 */
        }
        .priority-2 {
            background-color: #ccffcc; /* 一般，浅绿色 */
        }
    </style>
</head>
<body>
<div class="content">
    <% if (request.getAttribute("eventsError") != null) { %>
    <div id="error-message"><%= request.getAttribute("eventsError") %></div>
    <% } %>
    <h1>事务管理</h1>
    <div class="header-container">
        <div class="add-button-container">
            <form action="${pageContext.request.contextPath}/user/addevent" method="post" class="inline-form">
                <button type="submit" class="add-button">
                    <i class="ion-ios-add"></i> 新增事件
                </button>
            </form>
        </div>
        <div class="search-container">
            <form action="${pageContext.request.contextPath}/user/searchEvents" method="get">
                <input type="text" name="title" placeholder="搜索事件标题...">
                <select name="categoryId">
                    <option value="">所有分类</option>
                    <c:forEach items="${categoryList}" var="category">
                        <option value="${category.categoryId}" ${category.categoryId == null ? 'selected' : ''}>${category.categoryName}</option>
                    </c:forEach>
                </select>
                <select name="priority">
                    <option value="">所有级别</option>
                    <option value="0">重要</option>
                    <option value="1">紧急</option>
                    <option value="2">一般</option>
                </select>
                <input type="checkbox" name="status" id="status" value="0">
                <label for="status">仅显示已完成</label>
                <button type="submit">查询</button>
            </form>
        </div>
    </div>

    <div class="table-container">
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>分类</th>
                <th>优先级</th>
                <th>起始日期</th>
                <th>截止日期</th>
                <th>完成状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="event" items="${eventsList}" varStatus="status">
                <c:set var="priorityClass" value="" />
                <c:choose>
                    <c:when test="${event.priority == 0}">
                        <c:set var="priorityClass" value="priority-0" />
                    </c:when>
                    <c:when test="${event.priority == 1}">
                        <c:set var="priorityClass" value="priority-1" />
                    </c:when>
                    <c:when test="${event.priority == 2}">
                        <c:set var="priorityClass" value="priority-2" />
                    </c:when>
                </c:choose>
                <tr class="${priorityClass}">
                    <td>${status.index + 1}</td>
                    <td>${event.title}</td>
                    <td>
                        <c:forEach var="category" items="${categoryList}">
                            <c:if test="${category.categoryId == event.categoryId}">
                                ${category.categoryName}<br>
                            </c:if>
                        </c:forEach>
                    </td>
                    <td>
                        <c:choose>
                            <c:when test="${event.priority == 0}">重要</c:when>
                            <c:when test="${event.priority == 1}">紧急</c:when>
                            <c:when test="${event.priority == 2}">一般</c:when>
                            <c:otherwise>未知</c:otherwise>
                        </c:choose>
                    </td>
                    <td><fmt:formatDate value="${event.startDate}" pattern="yyyy年MM月dd日"/></td>
                    <td><fmt:formatDate value="${event.endDate}" pattern="yyyy年MM月dd日"/></td>
                    <td>
                        <c:choose>
                            <c:when test="${event.status == 0}">
                                已完成
                            </c:when>
                            <c:when test="${event.status == 1}">
                                未完成
                            </c:when>
                            <c:when test="${event.status == 2}">
                                作废
                            </c:when>
                            <c:otherwise>
                                未知状态
                            </c:otherwise>
                        </c:choose>
                    </td>
                    <td>
                        <div class="action-buttons">
                            <form action="${pageContext.request.contextPath}/user/detailEvent?eventId=${event.eventId}" method="post" class="inline-form">
                                <button type="submit" class="detail-button">详情</button>
                            </form>
                            <form action="${pageContext.request.contextPath}/user/editEvent?eventId=${event.eventId}" method="post" class="inline-form">
                                <button type="submit" class="edit-button">编辑</button>
                            </form>
                            <form action="${pageContext.request.contextPath}/user/deleteEvent?eventId=${event.eventId}" method="post" class="inline-form" onsubmit="return confirm('确定要删除该事件吗？');">
                                <button type="submit" class="delete-button">删除</button>
                            </form>
                        </div>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    window.onload = function () {
        var errorMessage = document.getElementById('error-message');
        if (errorMessage) {
            alert(errorMessage.textContent);
        }
    };
</script>
</html>